* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.mid-position {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* IE */
  -ms-transform: translate(-50%, -50%);
  /* 火狐 */
  -moz-transform: translate(-50%, -50%);
  /* 谷歌 */
  -webkit-transform: translate(-50%, -50%);
  /* 欧朋 */
  -o-transform: translate(-50%, -50%);
}

.vertical-position {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* IE */
  -ms-transform: translateY(-50%);
  /* 火狐 */
  -moz-transform: translateY(-50%);
  /* 谷歌 */
  -webkit-transform: translateY(-50%);
  /* 欧朋 */
  -o-transform: translateY(-50%);
}

.horizontal-position {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* IE */
  -ms-transform: translateX(-50%);
  /* 火狐 */
  -moz-transform: translateX(-50%);
  /* 谷歌 */
  -webkit-transform: translateX(-50%);
  /* 欧朋 */
  -o-transform: translateX(-50%);
}

body {
  color: #333333;
  font-size: 12px;
  font-family: "Microsoft YaHei", 微软雅黑;
}

ol,
ul {
  list-style: none;
}